import React, { useState, useEffect } from 'react'
import './tabs.scss'

const TopTabs = (props) => {
  
  const { dataSource, defaultKey } = props
  const [data, setData] = useState(dataSource)
  const [key, setKey] = useState(defaultKey)

  return (
    <div className='tabs'>
      <div className='tabs-title'>
        {
          data.map((item) => {
            return (
              <div
                onClick={() => setKey(item.key)}
                className={
                  `${ key === item.key ? 'tabs-title-item selected' : 'tabs-title-item' }`
                }
                key={ item.key }
              >
                { item.title }
              </div>
            )
          })
        }
      </div>
      <div className='tabs-content'>
        {
          data.map((item, index) => {
            return (
              <div
                className={
                  key === item.key ? 'tabs-content-item animation-come' : 'tab-content-items animation-out'
                }
                key={ item.key }
              >
                { key === item.key && props.children[index] }
              </div>
            )
          })
        }
      </div>
    </div>
  )
}
export default TopTabs